<template>
  <div class="tws-login-page">
    <top></top>

    <div class="tws-login-box">
      <div class="tws-n-left">
         <el-image v-if="advList.length" :src="advList[0].image_src_str" :title="advList[0].title" fit="cover"></el-image>
      </div>
      <div class="tws-n-right">
        <h3 class="tws-n-title">管理员重置密码</h3>
        <el-form ref="dataForm" :model="form" :rules="rules" class="tws-n-form" autocomplete="off" label-position="left" label-width="0">
          <div class="tws-n-input-box">
            <el-form-item  prop="mobile">
            	<el-input ref="mobile" size="large" prefix-icon="el-icon-user" v-model="form.mobile" placeholder="请输入手机号码" />
            </el-form-item>
          </div>
          <div class="tws-n-input-box">
            <el-form-item prop="sms_code" class="tws-send-sms">
              <el-input ref="sms_code" size="large" prefix-icon="el-icon-chat-square" v-model="form.sms_code" placeholder="请输入短信验证码" />
              <el-button type="primary" @click="changeCode(form.mobile)" :disabled="isDisabled">{{buttonName}}</el-button>
            </el-form-item>
          </div>
          <div class="tws-n-input-box">
            <el-form-item prop="password">
            	<el-input ref="password" show-password size="large" prefix-icon="el-icon-lock" v-model="form.password" placeholder="请输入6-20位的新密码" />
            </el-form-item>
          </div>
          <div class="tws-n-input-box">
            <el-form-item prop="password_repeat">
            	<el-input ref="password_repeat" show-password size="large" prefix-icon="el-icon-lock" v-model="form.password_repeat" placeholder="请输入确认密码" />
            </el-form-item>
          </div>
          <el-button class="tws-n-button" :loading="loading" type="primary" @click.native.prevent="createData" @keyup.enter.native="createData">重置密码</el-button>
        </el-form>
        <div class="tws-n-a-box">
          <router-link to="/login">去登录</router-link>
        </div>
      </div>
    </div>

    <bottom></bottom>
  </div>
</template>

<script>
import { forget } from '@/api/login'

import top from './components/top'
import bottom from './components/bottom'

export default {
  components: { top, bottom },
  data() {
    return {
      loading: false,
      advList: [],
      //数据
      form: {
        mobile: '',
        sms_code: '',
        password: '',
        password_repeat: '',
      },
      //验证规则
      rules: {
        mobile: [{ required: true, message: '请输入手机号码！', trigger: 'blur'}],
        sms_code: [{ required: true, message: '请输入短信验证码！', trigger: 'blur'}],
        password: [{ required: true, message: '请输入新密码！', trigger: 'blur'}],
        password_repeat: [{ required: true, message: '请输入确认密码！', trigger: 'blur'}]
      },

      // 倒计时
      buttonName: "发送验证码",
      isDisabled: false,
      time: 60,
    }
  },
  created() {
    //获取数据列表
  	this.getAdvInfo()
  },
  mounted() {
    if (this.form.mobile === '') {
      this.$refs.mobile.focus()
    }
  },
  methods: {
    //获取广告列表
    getAdvInfo() {
      this.$api.fetchListAdvIdent({ident:100}).then(response => {
        if(response.info.adv_list.length){
          this.advList = response.info.adv_list
        }
      })
    },
    // 发送验证码
    changeCode(phone) {
      let _then = this;
      //手机号码验证
      let re = /^1\d{10}$/;
      if(re.test(phone)){
        _then.isDisabled = true;
        let interval = window.setInterval(function () {
          _then.buttonName = _then.time + '秒';
          --_then.time;
          if (_then.time <= 0) {
            _then.buttonName = "重新发送";
            _then.time = 60;
            _then.isDisabled = false;
            window.clearInterval(interval);
          }
        }, 1000);

        // 发送请求
         this.$api.sendCode({ phone: phone }).then(response => {})
      }else{
        this.$message({
          message: '手机号码错误！',
          type: 'error'
        })
      }
    },
    //提交
    createData() {
      let _then = this
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          forget(this.form).then(response => {
            this.$message({
            	message: '重置密码成功',
            	type: 'success'
            })
            setTimeout(function(){
              _then.$router.push({ path: '/login'})
            },2000);
          })
          this.loading = false
        } else {
          return false
        }
      })
    }
  }
}
</script>
